/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import ScrollAnim from 'rc-scroll-anim';
import {message} from 'antd';
import Logo from "./../Logo";
import './index.scss';
import 'antd/dist/antd.css';

const Link = ScrollAnim.Link;
const EventListener = ScrollAnim.Event;
ScrollAnim.scrollScreen.init({ loop: true });

const NAVS = [
    {
        to: 'info',
        name: '实验特色',
    },
    {
        to: 'team',
        name: '教学团队',
    },
    {
        to: 'flux',
        name: '数据统计',
    },
    {
        to: 'comment',
        name: '交流园地',
    },
];

export default class Header extends Component {
    static propTypes = {};

    static defaultProps = {};

    constructor(props) {
        super(props);
        this.state = {};
    }
    //浏览器类型及版本
    getBrowserInfo() {
        var agent = navigator.userAgent.toLowerCase();
        var regStr_ie = /msie [\d.]+;/gi;
        var regStr_ff = /firefox\/[\d.]+/gi
        var regStr_chrome = /chrome\/[\d.]+/gi;
        var regStr_saf = /safari\/[\d.]+/gi;
        var isIE = agent.indexOf("compatible") > -1 && agent.indexOf("msie" > -1); //判断是否IE<11浏览器
        var isEdge = agent.indexOf("edge") > -1 && !isIE; //判断是否IE的Edge浏览器
        var isIE11 = agent.indexOf('trident') > -1 && agent.indexOf("rv:11.0") > -1;
        if (isIE) {
            var reIE = new RegExp("msie (\\d+\\.\\d+);");
            reIE.test(agent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if (fIEVersion == 7) {
                return "IE/7";
            } else if (fIEVersion == 8) {
                return "IE/8";
            } else if (fIEVersion == 9) {
                return "IE/9";
            } else if (fIEVersion == 10) {
                return "IE/10";
            }
        } //isIE end
        if (isIE11) {
            return "IE/11";
        }
        //firefox
        if (agent.indexOf("firefox") > 0) {
            return agent.match(regStr_ff);
        }
        //Safari
        if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
            return agent.match(regStr_saf);
        }
        //Chrome
        if (agent.indexOf("chrome") > 0) {
            return agent.match(regStr_chrome);
        }
    }
    componentDidMount() {
        // 添加改变窗口事件,可加setTimeout
        EventListener.addEventListener('resize.userResize', this.barAnimate);
        var browser = this.getBrowserInfo();//取到完整信息
        var b_name = (browser + "").replace(/[0-9./]/ig, "");//根据正则将所有数字、‘.’‘/’全部去掉，剩下浏览器名
        console.log(b_name);
        if(b_name !== "firefox" && b_name!== "chrome"){
            const node = (
                <i style={{ fontStyle: 'normal' ,fontSize: '15px'}}>您当前使用的是 {b_name} 浏览器，推荐使用<a href="https://www.google.cn/intl/zh-CN/chrome/">谷歌浏览器</a>或<a href="http://www.firefox.com.cn/">火狐浏览器</a></i>
            );
            message.error(node, 30)
        }else{
            const node = (
                <i style={{ fontStyle: 'normal' ,fontSize: '15px'}}>经检测，您的浏览器环境满足实验要求</i>
            );
            message.success(node, 5)
        }
    }

    barAnimate = () => {
        if (!this.dom) {
            return;
        }
        const bar = this.refs.bar;
        bar.style.left = `${this.dom.getBoundingClientRect().left}px`;
    };

    render() {
        return (
            <div className="header-container" id="header" >
                <div className="header-content">
                    <Logo />
                    <div className="headernavbar" id="nav">
                        {NAVS.map((nav, index) => {
                            return (
                                <Link
                                    key={index}
                                    className="nav-list"
                                    id="navList"
                                    to={nav.to}
                                    showHeightActive="300"
                                    // onFocus={this.onFocus}
                                >
                                    {nav.name}
                                </Link>
                            );
                        })}
                    </div>
                </div>
            </div>
        );
    }
}

